<template>
  <div class="folklonric">
    <updatefood/>
    <div>
      <div class="title-box">后台-温岭民俗</div>
      <div class="box-raduis-8">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="日期" width="180" align="center">
          </el-table-column>
          <el-table-column prop="title" label="姓名" width="180" align="center">
          </el-table-column>
          <el-table-column label="地址" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" style="width:150px;">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                >
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                >
            </template>
        </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import updatefood from './update/updateIndex.vue'
  export default {
    components:{
      updatefood
    },
    data() {
      return {
        tableData: [
        ]
      }
    },
    mounted() {
      this.getindex()
      this.$bus.$on("refresh", () => {
            this.getindex();
        });
    },
    methods: {
      getindex() {
        this.$axios.get('/api/food').then((response) => {
          this.tableData =response.data
          
        })
      },
      // 编辑按钮
      handleEdit(index, row){
        this.$bus.$emit("onEditorEvent",row)
      }
    }

  }

</script>

<style lang="scss" scoped>
  body {
    background-color: #ccc;
  }

</style>
